import { Box, Button, TextField } from '@mui/material';
import { memo } from 'react';

/**
 * JSON路径查询组件
 */
const PathQuerySection = memo(({ 
    jsonPath, 
    setJsonPath, 
    findJsonPath, 
    hasContent 
}: { 
    jsonPath: string; 
    setJsonPath: (value: string) => void; 
    findJsonPath: () => void; 
    hasContent: boolean; 
}) => (
    <Box sx={{
        display: 'flex',
        flexDirection: { xs: 'column', sm: 'row' },
        gap: 2,
        mb: 2,
        alignItems: 'center'
    }}>
        <TextField
            label="JSON路径查询"
            placeholder="例如: $.name 或 $.phoneNumbers[*].number"
            variant="outlined"
            fullWidth
            value={jsonPath}
            onChange={(e) => setJsonPath(e.target.value)}
        />
        <Button
            variant="contained"
            disabled={!jsonPath.trim() || !hasContent}
            onClick={findJsonPath}
            sx={{ minWidth: '120px', height: '56px' }}
        >
            查找
        </Button>
    </Box>
));

export default PathQuerySection;